import VueRouter from 'vue-router';
<template>
	<div style="overflow:hidden">
		<Row>
			<i-col span="17" style="border-right:1px solid #ddd">
				<div class="iconheader flex" style="justify-content:flex-end">
					<span class="iconcircle flex sa ac">
						<Icon type="ios-heart-outline" size="25" />
					</span>
					<span class="iconcircle flex sa ac"
						><Icon type="ios-boat-outline" size="25"
					/></span>
					<span class="iconcircle flex sa ac">
						<Icon type="ios-expand" size="25"
					/></span>
				</div>
				<div class="imgBody flex sa ac">
					<img src="../imgs/detail.gif" alt="" srcset="" />
				</div>
			</i-col>
			<i-col span="7">
				<div style="padding:20px">
					<div class="rightTitle flex sb ac">
						<h2>Transmutation</h2>
						<div class="flex sa">
							<span class="iconcircle flex sa ac">
								<Icon type="ios-heart-outline" size="25" />
							</span>
							<span class="iconcircle flex sa ac"
								><Icon type="ios-boat-outline" size="25"
							/></span>
						</div>
					</div>
					<div>
						<h3>
							非卖品

							<span style="color:#ddd">1 of 1</span>
						</h3>
					</div>
					<div class="margin-t">
						<Button type="primary" shape="circle" icon="ios-search"
							>Search</Button
						>
					</div>
					<h3 class="margin-t">Digital Art</h3>
					<Tabs value="name1" class="margin-t">
						<TabPane label="信息" name="name1">
							<div
								class="flex ac"
								style="justify-content:flex-start"
							>
								<div>
									<Avatar
										src="https://i.loli.net/2017/08/21/599a521472424.jpg"
									/>
								</div>
								<div class="margin">
									<p style="color:#ccc">持有者</p>
									<b>Jahtoshi_Rastamoto</b>
								</div>
							</div>
							<div
								class="flex ac"
								style="justify-content:flex-start"
							>
								<div>
									<Avatar
										src="https://i.loli.net/2017/08/21/599a521472424.jpg"
									/>
								</div>
								<div class="margin">
									<p style="color:#ccc">持有者</p>
									<b>Jahtoshi_Rastamoto</b>
								</div>
							</div>
						</TabPane>
						<TabPane label="持有者" name="name2">持有者</TabPane>
						<TabPane label="历史" name="name3">历史</TabPane>
					</Tabs>
				</div>
				<div class="bottomView padding">
					<Button
						type="primary"
						@click.native="showModal"
						shape="circle"
						long
						size="large"
						class="margin"
						>Connet a wallet</Button
					>

					<p style="text-align:center" class="margin">
						Item is not on sale, but you can place a bid
					</p>
				</div>
			</i-col>
		</Row>
		<Modal v-model="modal" width="300">
			<h1 class="padding">Place a bid</h1>
			<p class="padding">
				You are about to place a bid for CryptoCube#12 by Han
			</p>
			<div class="padding"><b>Your bid</b></div>
			<div>
				<Input
					v-model="value14"
					placeholder="Enter bid..."
					style="width: 260px"
				/>
			</div>
			<p>Your balance</p>
			<h5 class="">0 ETH</h5>
			<div class="flex ac sb padding">
				<p>Your balance</p>
				<h5>0 ETH</h5>
			</div>
			<div class="flex ac sb padding">
				<p>Your balance</p>
				<h5>0 ETH</h5>
			</div>
			<div class="flex ac sb padding">
				<p>Your balance</p>
				<h5>0 ETH</h5>
			</div>
		</Modal>
	</div>
</template>

<script>
export default {
	data() {
		return {
			modal: false,
			value14: '',
		};
	},
	methods: {
		showModal() {
			this.modal = true;
		},
	},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.iconcircle {
	border: 1px solid #333;
	margin: 10px;
	border-radius: 20px;
	width: 40px;
	height: 40px;
}

.imgBody {
	height: 100vh;
	padding-bottom: 144px;
}

.bottomView {
	height: 130px;
	margin-top: 130px;
	/* box-shadow: 9px 10px 90px black; */
}
</style>
